<template>
  <div>
    <ElForm inline ref="form" :model="queryCondition">
      <ElFormItem label="商品名称" prop="nameLike">
        <ElInput v-model="queryCondition.nameLike"></ElInput>
      </ElFormItem>
      <ElFormItem label="金额从" prop="minAmount">
        <ElInputNumber v-model="queryCondition.minAmount"></ElInputNumber>
      </ElFormItem>
      <ElFormItem label="至" prop="maxAmount">
        <ElInputNumber v-model="queryCondition.maxAmount"></ElInputNumber>
      </ElFormItem>
      <ElFormItem>
        <ElButton icon="Remove" @click="reset()"></ElButton>
        <ElButton icon="Search" type="primary" @click="queryByCondition(1)"> </ElButton>
        <ElButton icon="DocumentAdd" type="success" @click="open4Insert()"> </ElButton>
      </ElFormItem>
    </ElForm>

    <ElTable ref="table" :data="results" @selection-change="(rows: any) => (selected = rows)">
      <ElTableColumn type="selection" width="64" />
      <!-- <ElTableColumn type="expand">
        <template #default="{ row }">
          <div>{{ row.items }}</div>
          <ElTable :data="row.items">
            <ElTableColumn prop="goodsName"></ElTableColumn>
            <ElTableColumn prop="price"></ElTableColumn>
            <ElTableColumn prop="quantity"></ElTableColumn>
          </ElTable>
        </template>
      </ElTableColumn> -->
      <ElTableColumn prop="billId" label="采购单编号"></ElTableColumn>
      <ElTableColumn label="单据状态">
        <template #default="{ row }">
          <template v-for="(e, i) in billStates" :key="i">
            <ElTag v-if="e.value === row.billState" :type="e.color">{{ e.label }}</ElTag>
          </template>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="supplier" label="供货商"></ElTableColumn>
      <ElTableColumn label="付款金额">
        <template #default="{ row }">
          <div style="width: 64px; text-align: right">{{ row.amount.toFixed(2) }}</div>
        </template>
      </ElTableColumn>
      <ElTableColumn label="交货日期">
        <template #default="{ row }">
          <!-- 2021-02-20T12:00:00 -->
          <span>{{ row.receiveDate && row.receiveDate.split('T')[0] }}</span>
        </template>
      </ElTableColumn>
      <ElTableColumn label="修改 - 提交 - 废弃" :align="'center'" fixed="right" width="160px">
        <template #default="{ row }">
          <ElButton size="small" type="warning" icon="EditPen" @click="open4Modify(row)">
          </ElButton>
          <ElButton size="small" type="primary" icon="Finished" @click="open4Submit(row)">
          </ElButton>
          <ElPopconfirm @confirm="remove(row)" title="一旦删除无法恢复，确定进行?" width="240">
            <template #reference>
              <ElButton size="small" type="danger" icon="Delete"> </ElButton>
            </template>
          </ElPopconfirm>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <PurchaseInsert ref="insert" @post-insert="queryByCondition"></PurchaseInsert>
    <PurchaseModify ref="modify" @post-modify="queryByCondition"></PurchaseModify>
    <PurchaseSubmit ref="submit" @post-submit="queryByCondition"></PurchaseSubmit>
    <!-- <ReadOnlyPurchase :purchase-bill="purchaseBill" ></ReadOnlyPurchase> -->
  </div>
</template>
<script lang="ts">
import { PurchaseBill, PurchaseItem, billStates } from '@/entity/purchase.entity'

/**
 * 页面核心数据结构体说明文档
 *    billId: string = ''
  billState: BillState = BillState.toSubmit
  supplier: string = ''
  orderDate: Date = null
  receiveDate: Date = null
  amount: number = 0.0
  nextItemId: number = 0
  applier: string = ''
  applyTime: Date = null
  auditor: string = ''
  auditTime: Date = null
  auditMsg: string = ''
  history: string = ''
  updateTime: Date = null
 *
 */
// import from

export default defineComponent({
  name: 'PurchaseApplier',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      billStates,
      sampleD: 'value',
      queryCondition: {
        minAmount: 0,
        maxAmount: 0,
        nameLike: '',
        pageNum: 1,
        pageSize: 3
      } as any,
      total: 0,
      results: [] as Array<PurchaseBill>,
      selected: [] as Array<PurchaseBill>,
      purchaseBill: {
        billId: 'PB16874060029610026',
        supplier: 'tesla实验室-xxxxx',
        orderDate: '2023-06-05T16:00:00.000Z',
        receiveDate: '2023-06-21T16:00:00.000Z',
        billState: 'toSubmit',

        applier: 'zhangsan001',
        auditor: '88888',
        applyTime: null,
        auditTime: null,
        auditMsg: 'take care ppppp',

        items: [
          {
            price: 12.05,
            quantity: 40,

            goodsCode: 'MT16828553890490023',
            goodsName: '开关',

            itemId: 0,
            billFk: 'PB16874060029610026',
            priority: 0
          },
          {
            itemId: 1,
            billFk: 'PB16874060029610026',
            priority: 1,
            goodsCode: 'MT16838823678220033',
            goodsName: '示波器',
            price: 2236,
            quantity: 2
          }
        ] as Array<PurchaseItem>,
        amount: 4520.2,
        nextItemId: 2,
        history: '',
        updateTime: '2023-06-22T03:53:23.000Z'
      } as PurchaseBill
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition(1)
  },
  methods: {
    // sampleM() {},
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      const res = await axios({
        method: 'post',
        url: '/purchase/query/applier',
        data: this.queryCondition
      })
      this.total = res.data.total
      this.results = res.data.results
    },
    reset() {
      const form: any = this.$refs.form
      form.resetFields()
    },
    open4Insert() {
      const insert: any = this.$refs.insert
      insert.show()
    },
    async open4Modify(row: PurchaseBill) {
      console.log(row.billId)
      const res = await axios({
        method: 'get',
        url: '/purchase/find/' + row.billId
      })
      const modify: any = this.$refs.modify
      modify.show(res.data)
    },
    async open4Submit(row: PurchaseBill) {
      const res = await axios({
        method: 'get',
        url: '/purchase/find/' + row.billId
      })
      const submit: any = this.$refs.submit
      submit.show(res.data)
    },
    async remove(row: PurchaseBill) {
      const res = await axios({
        method: 'delete',
        url: '/purchase/remove/' + row.billId
      })
      ElMessage.success('已经删除 ' + res.data)
      this.queryByCondition()
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
